<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('800px')"
    :visible="visible"
    :title="title"
    @open="open"
    @close="close"
  >
    <el-form ref="form" label-width="auto" :model="form" :rules="rules" class="flex flex-wrap">
      <el-form-item :label="$t('ORGANIZATIONCODE')" prop="orgId" class="w-50">
        <el-input
          v-model.trim="form.orgId"
          maxlength="32"
          :readonly="type != 'add'"
          :placeholder="$t('ENTER_ORGANIZATION_CODE')"
        />
      </el-form-item>
      <el-form-item :label="$t('ORGANIZATION_NAME')" prop="orgName" class="w-50">
        <el-input
          v-model.trim="form.orgName"
          maxlength="32"
          :readonly="type == 'view'"
          :placeholder="$t('ENTER_ORGANIZATION_NAME')"
        />
      </el-form-item>
      <el-form-item :label="$t('ORG_TYPE')" prop="orgType" class="w-50">
        <el-select
          v-model="form.orgType"
          :disabled="orgDisable"
          :placeholder="$t('SELECT_ORGANIZATION_TYPE')"
        >
          <el-option
            v-for="item in dictList['ORG_TYPE']"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="getOrg.orgType !== 'PLATFORM' && item.value === 'PLATFORM'"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('CONTACT_PERSON')" prop="person" class="w-50">
        <el-input
          v-model="form.person"
          maxlength="32"
          :readonly="type == 'view'"
          :placeholder="$t('PLEASE_ENTER_CONTACT_PERSON')"
        />
      </el-form-item>
      <el-form-item :label="$t('CONTACT_NUMBER')" prop="tel" class="w-50">
        <el-input
          v-model="form.tel"
          maxlength="16"
          :readonly="type == 'view'"
          :placeholder="$t('PLEASE_ENTER_CONTACT_NUMBER')"
        />
      </el-form-item>
      <el-form-item :label="$t('FAX')" prop="fax" class="w-50">
        <el-input
          v-model="form.fax"
          maxlength="16"
          :readonly="type == 'view'"
          :placeholder="$t('PLEASE_ENTER_FAX')"
        />
      </el-form-item>
      <el-form-item :label="$t('EMAIL')" prop="email" class="w-50">
        <el-input
          v-model="form.email"
          maxlength="128"
          :readonly="type == 'view'"
          :placeholder="$t('PLEASE_ENTER_EMAIL')"
        />
      </el-form-item>
      <el-form-item :label="$t('ADDRESS')" prop="address" class="w-50">
        <el-input
          v-model="form.address"
          maxlength="256"
          :readonly="type == 'view'"
          :placeholder="$t('PLEASE_ENTER_ADDRESS')"
        />
      </el-form-item>
      <el-form-item :label="$t('DESCRIPTION')" prop="description" class="w-100">
        <el-input
          v-model="form.description"
          type="textarea"
          :readonly="type == 'view'"
          :placeholder="$t('ENTER_DESCRIPTION')"
          :row="4"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <template v-if="type == 'view'">
        <el-button @click="close">{{ $t('CLOSE') }}</el-button>
      </template>
      <template v-else>
        <el-button @click="close">{{ $t('CANCEL') }}</el-button>
        <el-button type="primary" @click="$debounce(save)">{{
          $t('SAVE')
        }}</el-button>
      </template>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import OrgApi from '@/api/system/OrgApi'

  export default {
    props: {
      visible: { type: Boolean, default: false },
      type: { type: String, default: '' },
      data: { type: Object, default: () => {} }
    },
    data() {
      return {
        form: {}
      }
    },
    computed: {
      ...mapGetters(['dictList', 'getOrg']),
      title() {
        if (this.type === 'add') {
          return this.$t('NEWAGENCY') // 新增
        } else if (this.type === 'view') {
          return this.$t('CHECKTHEBODY') // 查看
        }
        return this.$t('MODIFYTHEAGENCY') // '修改机构'
      },
      orgDisable() {
        let disabled = false
        if (this.type === 'view') {
          disabled = true
        } else if (this.type === 'add' && this.data.orgType) {
          disabled = true
        }
        return disabled
      },
      rules() {
        return {
          orgId: [
            {
              required: true,
              message: this.$t('MECHANISM_CODE_NOT_EMPTY'), // '机构编码不能为空',
              trigger: 'blur'
            },
            {
              pattern: /^[a-zA-Z0-9_]+$/,
              message: this.$t('ONLY_DIGITS_AND_UNDERSCORES'), // '只能为英文、数字、下划线',
              trigger: 'blur'
            }
          ],
          orgName: [
            {
              required: true,
              message: this.$t('AGENCY_NAME_NOT_EMPTY'), // '机构名称不能为空',
              trigger: 'blur'
            }
          ],
          orgType: [
            {
              required: true,
              message: this.$t('MECHANISM_TYPE_NOT_EMPTY'), // '机构类型不能为空',
              trigger: 'blur'
            }
          ],
          tel: [
            {
              pattern: /^\d{6,12}$/,
              message: this.$t('PHONE_NUMBER_FORMAT_INCORRECT'), // '电话号码格式错误',
              trigger: 'blur'
            }
          ],
          email: [
            {
              type: 'email',
              message: this.$t('EMAIL_FORMAT_WRONG'), // '电子邮箱格式错误',
              trigger: 'blur'
            }
          ],
          fax: [
            {
              pattern: /^(\d{3,4}-)?\d{7,8}$/,
              message: this.$t('FAX_FORMAT_ERROR'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      defaultData() {
        return {
          parentId: 0,
          orgName: '',
          orgType: '',
          person: '',
          tel: '',
          fax: '',
          email: '',
          address: '',
          description: ''
        }
      },
      open() {
        this.$refs.form && this.$refs.form.clearValidate()
        this.form = Object.assign(this.defaultData(), this.data)
      },
      save() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false
          }
          OrgApi[this.type](this.form).then(result => {
            if (result) {
              this.$message.success(this.$t('SAVE_SUCCESS'))
              this.close(true)
            }
          })
        })
      },
      close(load) {
        this.$emit('close', load)
      }
    }
  }
</script>

<style scoped></style>
